import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, RichText } from '@tarojs/components'

import {localTime} from '../../utils/date'
import {checkUserLoginStatus} from '../../actions/userAction'
import './index.scss'

const isWeApp = process.env.TARO_ENV === 'weapp' 

class ReplyContent extends Component{
  handlePlayOk(item){
    let {user} = this.props
    checkUserLoginStatus(user).then(res => {
      if(res){
        let params = {
          replyid: item.id,
          accesstoken: user.accesstoken
        }
        this.props.onHandlePlayOk(params)
      }else{
        Taro.navigateTo({url: '/pages/login/index'})
      }
    }) 
  }
  replyTopicReply(item){
    let {user} = this.props
    checkUserLoginStatus(user).then(res => {
      if(res){
        this.props.onReplyTopicReply(item)
      }else{
        Taro.navigateTo({url: '/pages/login/index'})
      }
    })
  }
  render(){
    let {reply} = this.props
    console.log(this.props.reply)
    return(
      <View className='reply-content'>
        {
          reply.map((item, index) => {
            return (
              <View className='reply-content-floor' key={item.id}>
                <Image className='reply-content-img' src={item.author.avatar_url} />
                <View className='reply-content-right'>
                  <View className='reply-content-right-all'>
                    <View className='reply-content-right-name'>
                      <Text className='loginname'>{item.author.loginname}</Text>
                      <Text className='reply-floor'>{index + 1}楼</Text>
                      <Text>{localTime(item.create_at)}</Text>
                    </View>
                    <View className='reply-content-right-text'>
                      {
                        isWeApp ? <RichText nodes={item.content} /> :  <View dangerouslySetInnerHTML={{__html: item.content}}></View>
                      }
                    </View>
                  </View>
                  <View className='reply-play'>
                    <Image 
                      className='reply-play-img' 
                      src={item.is_uped ? require('../../assets/images/zaned.png') : require('../../assets/images/zan.png')} 
                      alt='zan' 
                      onClick={this.handlePlayOk.bind(this, item)}
                    />
                    <Text>{item.ups.length}</Text>
                    <Image onClick={this.replyTopicReply.bind(this, item)} className='reply-play-img' src={require('../../assets/images/reply.png')} alt='reply' />
                  </View>
                </View>
              </View>
            )
          })
        }
      </View>
    )
  }
}

ReplyContent.dedaultProps = {
  item: {}
}

export default ReplyContent